<template>
	<!-- 招工 list redruit-list-->
	<view class="">
		<view class="item" v-for="(item,index) in list" :key="index" style="margin-bottom: 20rpx;">
			<view class="acea-row row-middle row-between" style="flex-wrap: nowrap;"
				@click="toDetail(item.id)">
				<view class="title line1">
					{{item.title}}
				</view>
			</view>
			<view class="acea-row goods-tag">
				<view class="tag" v-for="tags in item.serviceCharacteristics?item.serviceCharacteristics.split('/'):[]" :key="tags">
					{{tags}}
				</view>
			</view>
			<view class="acea-row row-between row-middle contact-box" >
				<view class="acea-row row-middle contact-info" @click="toDetail(item)">
					<image
						:src="item.contacts&&item.contacts.length>0?item.contacts[0].avatar:'../../static/images/f.png'"
						mode=""></image>
					<view class="name">
						<view class="line1">
							联系人：{{item.contactExternal || ''}}</view>
						<view class="line1">
							联系电话：{{item.phoneExternal?item.phoneExternal.replace(/(\d{3})\d*(\d{4})/,'$1****$2'):''}}
						</view>
					</view>
				</view>
				<view class="visit-l">
					<!-- <view class="visit-num">5866人咨询</view> -->
					<view class="visit-btn" @click="toConcat(item)">
						立即咨询
					</view>
				</view>
			</view>
			<view class="acea-row row-middle distance">
				<image src="@/static/images/location_gray.png" mode=""></image>
				<text>距您{{kmUnit(item.distance)}}</text>
			</view>
			<!-- 浏览、咨询统计 -->
			<view class="acea-row row-middle row-between visit-box" v-if="!isMatch">
				<view class="visit-advtar" @click="toVisitor(item)">
					<image :src="m.avatar" mode="" v-for="(m,ind) in item.managementResponse?item.managementResponse:[]"
						:key="ind" :style="{left: (20 * ind) + 'rpx'}"></image>
				</view>
				<view class="acea-row row-middle row-between visit-l">
					<!-- <view class="visit-num">{{item.view ||  0}}人浏览 已成功匹配{{item.matchingNum?item.matchingNum:0}}人</view> -->
					<view class="visit-num">{{item.view ||  0}}人浏览 已成功匹配{{ Math.floor(Math.random() * (500 - 50 + 1)) + 50 }}人</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between visit-box" v-else>
				<view class="visit-advtar" @click="toVisitor(item)">
					<image :src="m.avatar" mode="" v-for="(m,ind) in item.managementResponse?item.managementResponse:[]"
						:key="ind" :style="{left: (20 * ind) + 'rpx'}"></image>
				</view>
				<view class="acea-row row-middle row-between visit-l">
					<!-- <view class="visit-num">{{item.view ||  0}}人浏览 已成功匹配{{item.matchingNum?item.matchingNum:0}}人</view> -->
					<view class="visit-num">{{item.view ||  0}}人浏览 已成功匹配{{ Math.floor(Math.random() * (500 - 50 + 1)) + 50 }}人</view>
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	import {
		toPage,
		showLoading
	} from '@/filters/commFilter.js'
	export default {
		// 商铺专区列表项
		name: 'seekItem',
		props: {
			list: {
				type: Array,
				default: () => {
					return [1, 1, 1]
				}
			},
			canClose: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			detail: {
				type: Object,
				default: () => {
					return {}
				}
			},
			isMatch:{
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		data() {
			return {
				visitInfo: []
			}
		},
		methods: {
			toPage,
			//跳转个人主页
			toDetail(item) {
				let that = this;
				if (item.publisher&&parseInt(item.publisher)&&item.publisher != item.contacts[0].uid) {
					uni.showModal({
						title: '提示',
						content: '当前人不是发布人,是否跳转到发布人首页',
						confirmText: '跳发布人',
						cancelText: '跳当前人',
						success: function(res) {
							let id = ''
							if (res.confirm) {
								id= item.publisher;
							} else if (res.cancel) {
								id = item.contacts[0].uid
							}
							uni.navigateTo({
								url: '/pages/details/merchantInfo/merchantInfo?type=personal&id=' + id,
								events: {
									fanss(data) {
										that.fansOpear(data.info, data.callback);
									}
								}
							})
						}
					});
					return;
				}
				if (item.contacts && item.contacts.length > 0) {
					uni.navigateTo({
						url: '/pages/details/merchantInfo/merchantInfo?type=personal&id=' + item.contacts[0].uid,
					})
					return;
				}
				this.$util.Tips({
					title: '暂未获取到联系人'
				})

			},
			toDetail(id){
				uni.navigateTo({
					url:'/pages/details/unused/unused?id='+id
				})
			},
			//跳转个人主页
			toDetails(item) {
				let that = this;
				if (item.contactid != null) {
					uni.navigateTo({
						url: '/pages/details/merchantInfo/merchantInfo?type=personal&id=' + item.contactid,
					})
					return;
				}
				
				this.$util.Tips({
					title: '暂未获取到联系人'
				})
			
			},
			kmUnit(m) {
				m = Number(m)
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if(m>10000){
						m = 0;
					}
					if (m >= 1) {
						v = m.toFixed(2) + 'km'
					} else {
						v = (m*1000).toFixed(2) + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			toConcat(item) {
				if (!item || !item.phoneExternal) {
					this.$util.Tips({
						title: '暂未获取到联系人'
					})
					return;
				}
				getApp().globalData.into_singleChatRoom({
					phone: item.phoneExternal,
					info: item
				})
			},
			toVisitor(data) {
				
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=&data=" + JSON.stringify(data)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 列表
	.list {
		padding: 32rpx;
	}

	.item {
		border-radius: 10rpx;
		background: #ffffff;
		padding: 24rpx 24rpx 0;
		overflow: hidden;

		.top-info {
			margin-bottom: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(191, 186, 186, 1);

			.close {
				font-size: 36rpx;
			}
		}

	}

	.redruit-list {}

	.title {
		width: 95%;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(56, 56, 56, 1);
		text-overflow: ellipsis; //溢出的文本变成省略号 *必须
		overflow: hidden; // 不显示溢出的部分 *必须
		white-space: no-wrap; //禁止自动折行 *必须
	}

	.price {
		font-size: 36rpx;
		font-weight: 500;
		color: rgba(238, 33, 45, 1);
	}

	.area {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(238, 33, 45, 1);
	}

	.goods-tag {
		margin-top: 18rpx;
		margin-bottom: 18rpx;

		.tag {
			white-space: nowrap;
			border-radius: 4px;
			background: rgba(255, 232, 234, 1);
			padding: 6rpx 12rpx;
			margin-right: 12rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}

		.tag:last-child {
			margin-right: 0;
		}
	}

	.contact-info {
		width: 70%;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}

		.name {
			width: calc(100% - 100rpx);
			height: 70rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			margin-left: 24rpx;
		}
	}

	.visit-l {
		width: 30%;

		.visit-num {
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);
			margin-bottom: 12rpx;
		}

		.visit-btn {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			opacity: 1;
			border-radius: 30rpx;
			background: rgba(238, 33, 45, 1);
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}

	.distance {
		width: 100%;
		padding: 16rpx 12rpx 12rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);

		image {
			width: 18rpx;
			height: 24rpx;
			margin-right: 6rpx;
		}
	}

	// 浏览咨询统计
	.visit-box {
		padding: 30rpx 0;
		margin-top: 30rpx;
		border-top: 1px solid rgba(238, 238, 238, 1);

		.visit-advtar {
			width: 40%;
			height: 46rpx;
			position: relative;

			image {
				width: 46rpx;
				height: 46rpx;
				border-radius: 50%;
				position: absolute;
			}
		}

		.visit-l {
			width: 60%;
			height: 46rpx;

			.visit-num {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
			}
		}

	}


	.item.ecpire {
		.sell-goods .goods-img .tag {
			color: rgba(255, 255, 255, 1);
			background: rgba(8, 5, 1, 0.8);
		}

		.price {
			color: rgba(128, 128, 128, 1);
		}

		.goods-tag .tag {
			color: rgba(166, 166, 166, 1);
			background: rgba(229, 229, 229, 1);
		}

		.goods-tag .tag-tit {
			color: rgba(166, 166, 166, 1);
		}

		.suitable {
			color: rgba(166, 166, 166, 1);
			background: rgba(229, 229, 229, 1);
		}

		.visit-l .visit-btn {
			background: rgba(166, 166, 166, 1);
		}

		.sell-goods .goods-info .gold-coin {
			background: rgba(166, 166, 166, 1);
			border: 1px solid rgba(166, 166, 166, 1);
		}
	}

</style>